<template>
	<view>
		<!-- 搜索条 -->
		<view class="searchBox">
			<view class="inputBox"> 
				<input type="text" focus="true" placeholder="搜索话题" v-model="keyword" @confirm="doSearch()"
				 placeholder-class="placeholder-class" confirm-type="search">
			</view>
			<view class="searchBtn" @tap="doSearch()">搜索</view>
		</view>
		<!-- 文章内容区 -->
		<view class="grace-news-list" style="width:94%; padding:5px 3%;">
			<view v-for="(item, index) in topicAll" :key="index" @click="goTopicDetail(item.id, item.title)">
				<view class="grace-news-list-items">
					<image :src="serverUrl+item.cover" class="grace-news-list-img grace-list-imgs-l" ></image>
					<view class="grace-news-list-title">
						<view class="grace-news-list-title-main">#{{item.title}}#</view>
						<text class="grace-news-list-title-desc grace-text-overflow">{{item.description}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align:center;" v-show="dataShow">数据为空</view>	
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['topic'])
		},				
		data() {
			return {
				serverUrl: this.serverUrl,
				top: 0,
				topicAll: [],
				page: 1,
				dataShow: false
			};
		},
		onLoad: function() {
			// #ifdef H5
			this.top = '44px';
			// #endif
			this.page = 1;
			artList: [];
			this.getSocialTopic();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			this.page = 1;
			this.topicAll = [];
			this.getSocialTopic();
		},
		// 加载更多
		onReachBottom: function() {
			this.getSocialTopic();
		},
		methods: {
			...mapMutations(['setTopic']),			
			getSocialTopic: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'user-api/getSocialTopic',
					data: {
						title: this.keyword==undefined?"":this.keyword,
						pageNumber: this.page,
						pageSize: 10,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.topicAll.length < 1) {
									this.dataShow = true;
								}else{
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							}else{
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.length; i++) {
								var datobj = {
									id: r.data.data[i].id,
									cover: r.data.data[i].cover == null||r.data.data[i].cover == "" ? "../../../static/zhaopian.png" : r.data.data[i].cover,
									title: r.data.data[i].title,
									description: r.data.data[i].description,
								};
								this.topicAll = this.topicAll.concat(datobj);
							}
							this.page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			}, 
			goTopicDetail(id,title) {
				var obj = {
					topicId: id,
					topicTitle: title
				}
				this.setTopic(obj);
				uni.navigateBack({
					delta: 1
				})
			},
			doSearch(){
				this.page = 1;
				this.topicAll = [];
				this.getSocialTopic();
			}
		}
	}
</script>
<style>
	/* 分段器头部 fixed 定位 */
	.fixedit {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
	}

	.grace-tab-title view {
		padding: 0 6px;
		margin: 0 8px;
		line-height: 35px;
	}

	.grace-news-list-imgs {
		max-height: 68px;
		overflow: hidden;
	}
	.searchBox {
		width: 95%;
		background-color: rgb(242, 242, 242);
		padding: 7.5px 2.5%;
		display: flex;
		justify-content: space-between;
	}

	.searchBox .inputBox {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.searchBox .searchBtn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 14px;
		color: #fff;
		background-color: #417dc9;
		border-radius: 30px;
	}

	.searchBox .inputBox>input {
		width: 100%;
		height: 30px;
		font-size: 30upx;
		border: 0;
		border-radius: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.placeholder-class {
		color: #9e9e9e;
	}
	
	.grace-news-list-title-desc{
		margin-top:0upx; 
	}
	
	.grace-news-list-items {
		margin-bottom: 15upx;
	}
	
	.grace-news-list-img{
		height: 125upx;
		width: 165upx;
		border-radius: 5upx;
	}
	
	.grace-news-list-title-main {
		color: #1874CD;
		font-weight: bold;
	}

</style>
